<template>
  <div class="customerOrderContainer">
    <orderHeader />
  </div>
</template>

<script>
import orderHeader from './components/orderHeader'
export default {
  name: 'Customerorder',
  components: { orderHeader },
  data() {
    return {
      currentPage: 5,
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: '', // select表单的value值
      targetTime: '',
      pickerOptions: {
        // 时间选择器的快选项
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      orders: [
        // 测试用的订单
        { id: 1, num: 111111, flag: 'success', isCheck: false },
        { id: 2, num: 222222, flag: 'success', isCheck: false },
        { id: 3, num: 333333, flag: 'fail', isCheck: false }
      ]
    }
  },
  computed: {
    isAll() {
      return this.orders.every((item) => {
        return item.isCheck // 每一个isCheck属性都是true的话就返回true
      })
    }
  },
  methods: {
    handleSizeChange(val) {
 
    },
    handleCurrentChange(val) {
 
    },
    handleCheckAllChange() {
      // 全选框
    },
    handleClick(val, event) {
      this.orders.forEach((item) => {
        // 匹配上了直接修改属性值
        item.isCheck = item.id === val ? !item.isCheck : item.isCheck
      })
      // event.target.parentNode.style.backgroundColor = "red";
    }
  }
}
</script>

<style scoped lang="scss">
.customerOrderContainer {
  padding: 5px;
  background-color: #e8f1f7;
  height: 1080px;
  position: relative;
}
</style>
